<template>
  <div class="deduction">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="枚举" name="first">
            <div>
                <el-form :rules="rules"  :model="formInline" class="demo-form-inline">
                  <el-form-item label="域名">
                    <el-input v-model="formInline.aa"></el-input>
                    </el-form-item>
                    <el-form-item label="域名">
                        <el-select v-model="formInline.user" placeholder="活动区域">
                            <el-option label="报文头" value="head"></el-option>
                            <el-option label="报文体" value="entity"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="栏位名">
                        <el-select v-model="formInline.region" placeholder="活动区域">
                            <el-option v-for="item in addData" :key="item.id" :label="item.name" :value="`${item.id}/${item.name}`"></el-option>
                        </el-select> 
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">添加到</el-button>
                    </el-form-item>
                    <el-form-item label="域名">
                        <el-select v-model="formInline.user" placeholder="活动区域">
                            <el-option label="报文头" value="head"></el-option>
                            <el-option label="报文体" value="entity"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="栏位名">
                        <el-select v-model="formInline.region" placeholder="活动区域">
                            <el-option v-for="item in addData" :key="item.id" :label="item.name" :value="`${item.id}/${item.name}`"></el-option>
                        </el-select> 
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="mapdata">添加到</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column
                    type="index"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                    <el-table-column
                    v-for="(item,index) in tableDataHeader"
                    :key="index"
                    :prop="item.field_id"
                    :label="item.field_name"
                    :type="item.type"
                    >
                        <template slot-scope="scope">
                          {{item}}
                            <!-- {{scope.row[scope.column.property]}} -->
                            <!-- <p v-if="">{{scope.row[scope.column.property]}}</p> -->
                            <el-input readonly v-model="scope.row[scope.column.property]"></el-input>
                            <!-- {{scope.row}} -->
                            <!-- {{scope.index}} -->
                            <!-- {{scope.column.property}} -->
                            <!-- 渲染对应表格里面的内容 -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-tab-pane>
        <el-tab-pane label="叉乘" name="second">叉乘</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rules:{
        aa:[
          {required:true,message:"hahahha",trigger:"blur"}
        ]
      },
      aa:"",
      activeName: 'first',
      formInline: {
          aa:'',
          user: '',
          region: ''
        },
      addData:[
          {id:"id1",name:"head1"},
          {id:"id2",name:"head2"},
          {id:"id3",name:"head3"}
      ],//option内容
      tableData: [//table内容
        {
          Date: "2016-05-02",
          ExcelName: "王小虎",
          DataDetail: "588",
        },
        {
          Date: "2016-05-04",
          ExcelName: "王小虎",
          DataDetail: "16.38",
        },
        // {
        //   Date: "2016-05-01",
        //   ExcelName: "王小虎",
        //   DataDetail: "599.6"
        // }
      ],
      tableDataHeader: //table表头
      [
        // { field_name: "", field_id: "" },
        { field_name: "申报时间", field_id: "Date" },
        { field_name: "申报表名", field_id: "ExcelName" },
        { field_name: "应补退税额", field_id: "DataDetail" }
      ]
    };
  },
  methods: {
      onSubmit() {
        // console.log('submit!');
        this.tableData.push({
          Date: "",
          ExcelName: "",
          DataDetail: ""
        })
      },
      handleClick(tab, event) {
        // console.log(tab, event);
      },
      add(){
          this.tableDataHeader.push()
      },
      del(){
          this.tableDataHeader
      },
      handleSelectionChange(val){
        console.log(val)
        // this.multipleSelection = val;
      },
      mapdata(){
        let aa=this.tableDataHeader.map((item)=>{
          return item.field_id
        })
        console.log(aa)
      }
  }
};
</script>
<style>
.el-form {
  display: flex;
  white-space: nowrap;
}
</style>